<template>
  <view class="product-detail-self">
    <view class="detail-com">
      <view class="detail-title">{{ car.car_series_name }}</view>
      <view class="detail-deploy">
        {{ car.car_brand_name + car.car_series_name + car.car_model_name }}
      </view>
      <view>
        <view class="detail-tag" v-for="tag in car.tags" :key="tag.value_title">
          {{ tag.value_title }}
        </view>
      </view>
      <view class="detail-pinfo">
        <view class="detail-price">{{ Number(car.price).toFixed(2) }}</view>
        <view class="detail-unit">万</view>
        <view class="detail-area">
          厂商指导价：{{ Number(car.car_guide_price).toFixed(2) }}万
        </view>
      </view>
    </view>
    <view class="height"></view>
    <view class="detail-params">
      <view class="detail-view">
        <view class="params-fl">库位</view>
        <view class="params-fr">
          {{ car.car_address && formatAddress(car.car_address) }}
        </view>
      </view>
      <view class="detail-view">
        <view class="params-fl">联系电话</view>
        <view class="params-fr">{{ car.contact_mobile }}</view>
      </view>
      <view class="detail-view">
        <view class="params-fl">销售地区</view>
        <view class="params-fr">
          {{
            car.sale_area && car.sale_area.length > 0
              ? car.sale_area.map(i => i.province_name + i.city_name).join('、')
              : '全国'
          }}
        </view>
      </view>
      <view class="detail-view">
        <view class="params-fl">配置</view>
        <view class="params-fr">
          {{ car.feature_desc ? car.feature_desc : '--' }}
        </view>
      </view>
      <view class="detail-view">
        <view class="params-fl">颜色</view>
        <view class="params-fr">
          {{
            car.appearance && car.appearance.map(i => i.value_title).join('/')
          }}
        </view>
      </view>
      <view class="detail-view">
        <view class="params-fl">排放标准</view>
        <view class="params-fr">{{ car.emission_name }}</view>
      </view>
    </view>
    <view class="height"></view>
    <view class="detail-info" v-for="(item, index) in car.imgs" :key="index">
      <image :src="item" mode="widthFix" />
    </view>
    <view class="height"></view>
  </view>
</template>

<script>
import { formatAddress } from '@utils/'
export default {
  name: 'Detail',
  props: {
    car: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {}
  },
  methods: {
    formatAddress
  }
}
</script>

<style>
.product-detail-self {
  width: 100%;
  padding-bottom: 200px;
}
.height {
  width: 100%;
  height: 24rpx;
  background: #f9f9f9;
}
.product-detail-self .detail-com {
  padding: 24rpx 24rpx;
}
.product-detail-self .detail-title {
  font-size: 32rpx;
  font-weight: bold;
}
.product-detail-self .detail-deploy {
  font-size: 28rpx;
  color: #333;
  margin: 8rpx 0;
}
.product-detail-self .detail-pinfo {
  overflow: hidden;
  margin-top: 8rpx;
}
.product-detail-self .detail-price {
  float: left;
  font-size: 36rpx;
  color: #ff0000;
  font-weight: bold;
}
.product-detail-self .detail-unit {
  float: left;
  font-size: 28rpx;
  color: #ff0000;
  margin-left: 8rpx;
  margin-top: 6rpx;
}
.product-detail-self .detail-tag {
  display: inline-block;
  color: #ff0000;
  border: 2rpx solid #ff0000;
  padding: 2rpx 8rpx;
  font-size: 18rpx;
  margin-right: 8rpx;
  border-radius: 6rpx;
}
.product-detail-self .detail-area {
  float: left;
  font-size: 26rpx;
  color: #666;
  margin-left: 8rpx;
  margin-top: 10rpx;
}
.product-detail-self .detail-params {
  padding: 10rpx 24rpx;
}
.product-detail-self .detail-params .detail-view {
  padding: 24rpx 0;
  overflow: hidden;
}
.product-detail-self .detail-params .params-fl {
  float: left;
  width: 210rpx;
  font-size: 28rpx;
  color: #666;
}
.product-detail-self .detail-params .params-fr {
  margin-left: 210rpx;
  font-size: 28rpx;
  color: #000;
}
.product-detail-self .detail-info {
  padding: 10rpx 24rpx;
}
.product-detail-self .detail-info image {
  width: 100%;
}
</style>
